<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <!-- 引入 layui.css -->
        <link
            rel="stylesheet"
            href="//unpkg.com/layui@2.6.8/dist/css/layui.css"
        />
        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div style="width: 98%; height: 100%; margin: auto">
            <div class="layui-card">
                <div class="layui-card-header">热门电影列表展示</div>
                <div class="layui-card-body">
                    <div id="boxs" class="flow-default">
                        <div id="box" class="flow-default"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        //控制显示页数的变量
        var pages = 0;
        //用来存储所有数据
        var arr = [];
        //请求连接获取数据
        function fun() {
            $.ajax({
                type: "get",
                url: `https://liu.zzgoodqc.cn/movie/list?page=${pages}`,
                success: function (res) {
                    arr.push(res.coming);
                    page(arr);
                },
            });
        }

        //把数据渲染到页面
        function page(data) {
            //定义变量
            var html = "";
            //循环遍历-----因为数据结构原因这里使用刷个for循环
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].length; j++) {
                    //把获取到的值一次渲染到也缪按
                    html += `<div id="box" class="flow-default">
                                <div id="img"><img src="${data[i][j].img}" alt=""></div>
                                <div id="size">
                                    <p style="font-size:1.2rem;">${data[i][j].nm}</p>
                                    <p>评分<span style="color:rgba(229, 118, 14, 0.958)">  &nbsp; ${data[i][j].sc}</span></p>
                                    <p>主演：${data[i][j].star}</p>
                                    <button id="butt" style="float: right;width: 70px; height: 35px;background:#fd5681;color:#fff;border:1px solid #fff;border-radius:20px;position: relative;right:20px;bottom:0px" onclick="ticket(${data[i][j].id})">购票</button>
                                </div>
                              </div>`;
                }
            }
            $("#box").html(html);
        }

        layui.use("flow", function () {
            var flow = layui.flow;
            flow.load({
                elem: "#box", //流加载容器
                // scrollElem: "#LAY_demo1", //滚动条所在元素，一般不用填，此处只是演示需要。
                isAuto: true,
                mb: 0,
                done: function (page, next) {
                    //执行下一页的回调
                    //模拟数据插入
                    setTimeout(function () {
                        lis = [];
                        pages++;
                        fun();
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(""), page < 4); //假设总页数为 10
                    }, 500);
                },
            });
        });
        function ticket(id) {
            if (!localStorage.getItem("str")) {
                localStorage.setItem("str", "");
            }
            if (!localStorage.getItem("arr")) {
                localStorage.setItem("arr", JSON.stringify([]));
            }
            localStorage.setItem("arr", JSON.stringify(arr));
            localStorage.setItem("str", id);
            window.location.href = "./PurchaseTicket.html";
        }
    </script>
    <style>
        img {
            width: 100%;
            border-radius: 10px;
        }

        #img {
            width: 30%;
            height: 150px;
            float: left;
        }

        #size {
            width: 70%;
            height: 150px;
            margin-left: 35%;
            margin-bottom: 10px;
        }

        #box {
            margin-bottom: 10px;
        }

        body {
            background: #fff;
        }
    </style>
</html>
